<template>
  <div id="mainRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <dv-decoration-8 style="width:25%;height:40px;" />
        <span class="fs-xl text mx-2" style="width:50%;height:40px;font-size:30px;display: inline-block;line-height: 40px;text-align: center">全线良品率对比</span>
        <dv-decoration-8 :reverse="true" style="width:25%;height:40px;" />
      </div>
      <div class="d-flex ai-center flex-column body-box">
        <dv-charts class="dv-cap-chart" :option="option" />
      </div>
    </div>
  </div>
</template>

<script>

import { linesDailyStatic } from '@/api/yield'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

export default {
  data() {
    return {
      timing2: null,
      option: {},
      currentFinalData: {
        xAxis: {
          name: '05-20',
          data: ['05-14', '05-15', '05-16', '05-17', '05-18', '05-19', '05-20']
        },
        series: [
          {
            data: [91, 92, 95, 95, 97, 98, 89]
          },
          {
            data: [97, 97, 92, 93, 98, 98, 91]
          },
          {
            data: [95, 92, 95, 95, 92, 93, 91]
          },
          {
            data: [95, 92, 95, 95, 92, 93, 91]
          },
          {
            data: [95, 96, 94, 95, 92, 95, 91]
          }
        ]
      }
    }
  },
  watch: {
    currentFinalData: {
      handler(newData) {
        // 展平数组写法 es2019
        const rangeArr = newData.series.flatMap(series => series.data)
        // const rangeArr = []
        // for (let i = 0; i < newData.series.length; i++) {
        //   for (let j = 0; j < newData.series[i].data.length; j++) {
        //     rangeArr.push(newData.series[i].data[j])
        //   }
        // }
        // 圆整到10位数 范围过大 图形不够好看 改为圆整到偶数
        let maxValue = Math.floor(Math.max(...rangeArr) + 2)
        maxValue = (maxValue % 2 !== 0) ? maxValue - 1 : maxValue
        let minValue = Math.floor(Math.min(...rangeArr))
        minValue = (minValue % 2 !== 0) ? minValue - 1 : minValue
        // const maxValue = Math.floor(Math.max(...rangeArr) / 10 + 1) * 10
        // const minValue = Math.floor(Math.min(...rangeArr) / 10) * 10
        console.log('linesDailyStatic newData', newData, maxValue, minValue)
        this.option = {
          color: [
            '#40d0da',
            '#ffdb5c',
            '#5aff5b',
            '#5583ff',
            '#e9435a',
            '#8378ea'
          ],
          title: {
            text: '',
            style: {
              fill: '#FFF',
              fontSize: 14,
              fontWeight: 'bold',
              textAlign: 'center'
            }
          },
          grid: {
            bottom: 56
          },
          legend: {
            data: ['一线', '二线', '三线', '四线', '五线'],
            top: 35,
            itemGap: 30,
            textStyle: {
              fill: '#FFF',
              fontSize: 14,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          xAxis: {
            // name: newData.xAxis.name,
            data: newData.xAxis.data,
            axisLabel: {
              style: {
                fill: '#FFF',
                fontSize: 12,
                fontWeight: 'bold',
                textAlign: 'center'
              }
            },
            nameTextStyle: {
              fill: '#FFF',
              fontSize: 14,
              fontWeight: 'bold',
              textAlign: 'center'
            }
          },
          yAxis: {
            name: '良品率',
            data: 'value',
            // boundaryGap: true,
            splitLine: {
              show: false
            },
            max: maxValue,
            min: minValue,
            // max: 98,
            // min: 88,
            // interval: 20,
            splitNumber: 3,
            axisLabel: {
              show: false,
              style: {
                fill: '#FFF',
                fontSize: 12,
                fontWeight: 'bold',
                textAlign: 'center'
              }
            },
            nameLocation: 'center',
            nameTextStyle: {
              fill: '#FFF',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          series: [
            {
              name: '一线',
              data: newData.series[0].data,
              type: 'line',
              label: {
                show: true,
                style: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  textAlign: 'center'
                }
              },
              linePoint: {
                radius: 4
              },
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '二线',
              data: newData.series[1].data,
              type: 'line',
              label: {
                show: true,
                style: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  textAlign: 'center'
                }
              },
              linePoint: {
                radius: 4
              },
              lineArea: {
                show: true,
                gradient: ['rgba(218,210,105,0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '三线',
              data: newData.series[2].data,
              type: 'line',
              label: {
                show: true,
                style: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  textAlign: 'center'
                }
              },
              linePoint: {
                radius: 4
              },
              lineArea: {
                show: true,
                gradient: ['rgba(43,218,14,0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '四线',
              data: newData.series[3].data,
              type: 'line',
              label: {
                show: true,
                style: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  textAlign: 'center'
                }
              },
              linePoint: {
                radius: 4
              },
              lineArea: {
                show: true,
                gradient: ['rgba(255,148,65,0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '五线',
              data: newData.series[4].data,
              type: 'line',
              label: {
                show: true,
                style: {
                  fontSize: 16,
                  fontWeight: 'bold',
                  textAlign: 'center'
                }
              },
              linePoint: {
                radius: 4
              },
              lineArea: {
                show: true,
                gradient: ['rgba(218,35,9,0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.getYieldCal()
    this.timeFn2() // todo base
  },
  beforeDestroy() {
    clearInterval(this.timing2)
  },
  methods: {
    // 过去7天
    getYieldCal() {
      const queryStaticsParams = {}
      let line24Statics = []
      const currentTime = new Date()
      // const yieldSort = 'DESC'
      const yieldSort = 'ASC'
      // 先做5天版本
      // line24Statics[0] = dayjs(currentTime).subtract(8, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      line24Statics = ['2025-05-21 08:00:00', '2025-05-26 08:00:00'] // 测试时间 todo 生产端需注释
      // 时间段优化
      const thisTime = Number(dayjs(currentTime).format('HH'))
      if (thisTime >= 8) {
        // 如果此时时间是8点以后 start读取5日 end读取今日时间 实际最后一天时间是前日
        line24Statics[0] = dayjs(currentTime).subtract(5, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
        line24Statics[1] = dayjs(currentTime).format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      } else if (thisTime < 8) {
        // 如果此时时间是0-8点 start读取1+5日 end读取昨1日时间 实际最后一天时间是昨日
        line24Statics[0] = dayjs(currentTime).subtract(6, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
        line24Statics[1] = dayjs(currentTime).subtract(1, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      }
      // line24Statics[0] = dayjs(currentTime).subtract(6, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      // line24Statics[1] = dayjs(currentTime).subtract(1, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      // line24Statics = ['2025-05-21 08:00:00', '2025-05-26 08:00:00'] // 测试时间 todo 生产端需注释
      console.log('line24Statics', line24Statics)
      // const dateData = ['', '', '', '', '', '', '']
      const dateData = ['', '', '', '', '']
      for (let i = 0; i < 5; i++) {
        dateData[i] = dayjs(line24Statics[1]).subtract(5 - i, 'day').format('MM-DD')
      }
      const currentFinalData = {}
      currentFinalData.xAxis = {}
      currentFinalData.xAxis.name = dateData[4]
      currentFinalData.xAxis.data = dateData
      const line1YieldData = [0, 0, 0, 0, 0]
      const line2YieldData = [0, 0, 0, 0, 0]
      const line3YieldData = [0, 0, 0, 0, 0]
      const line4YieldData = [0, 0, 0, 0, 0]
      const line5YieldData = [0, 0, 0, 0, 0]
      currentFinalData.series = [
        { data: line1YieldData },
        { data: line2YieldData },
        { data: line3YieldData },
        { data: line4YieldData },
        { data: line5YieldData }
      ]
      linesDailyStatic(this.addParam((this.addDateRange(queryStaticsParams, [line24Statics[0], line24Statics[1]])), 'sort', yieldSort)).then(response => {
        console.log('dateData', dateData)
        // 先分线 再找时间 todo
        // 已从后端拿到数据 分5组即可
        // cur.staticsId.substring(2, 3)
        // todo 需要考虑无数据
        const allData = response.data.reduce(function(acc, cur) {
          acc.push(Number((cur.yieldSquare / cur.pullingSquare * 100).toFixed(1)))
          return acc
        }, [])

        currentFinalData.series[0].data = allData.slice(0, 5)
        currentFinalData.series[1].data = allData.slice(5, 10)
        currentFinalData.series[2].data = allData.slice(10, 15)
        currentFinalData.series[3].data = allData.slice(15, 20)
        currentFinalData.series[4].data = allData.slice(20)

        this.currentFinalData = currentFinalData

        //   this.option.xAxis.name = dateData[4]
        // this.option.xAxis.data = dateData
        // this.option.series[0].data = currentFinalData.slice(0, 5)
        // this.option.series[1].data = currentFinalData.slice(5, 10)
        // this.option.series[2].data = currentFinalData.slice(10, 15)
        // this.option.series[3].data = currentFinalData.slice(15, 20)
        // this.option.series[4].data = currentFinalData.slice(20)
        console.log('this.currentFinalData', this.currentFinalData)
      })
    },
    timeFn2() {
      this.timing2 = setInterval(() => {
        console.log('日报 left 实时2', dayjs(new Date()).format('YYYYMMDDHHmmss'))
        this.getYieldCal()
      }, 120000)
    }
  }
}
</script>

<style lang="scss" scoped>
  $box-height: 435px;
  $box-width: 100%;
  #mainRight {
  padding: 20px 14px 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    padding: 5px;
    height: $box-height - 35px;
    width: $box-width;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-cap-chart {
      width: 90%;
      height: $box-height * 0.8;
      /*height: 270px;*/
      /*::v-deep(.unit-label) {*/
      /*  display: none;*/
      /*}*/
    }
  }
}
</style>
